<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      type="image/svg+xml"
      href="/logo.svg"
    />
    <link
      rel="stylesheet"
      href="./src/global-loading.scss"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <meta name="referrer" content="no-referrer" />
    <style>
      html.dark #app {
        background: url('@/assets/images/bg.blue.jpg');
        background-size: cover;
      }
      .safe-note {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 15px 60px 15px 20px;
        font-size: 14px;
        background-color: #fffbdd;
        color: #53524f;
        z-index: 999;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .safe-note.show {
        opacity: 1;
        transform: translateY(0);
      }
      .safe-note-title {
        float: left;
      }
      .safe-note-content {
        margin: 0;
      }
      .safe-note-close {
        cursor: pointer;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        font-size: 18px;
        text-align: center;
      }
    </style>
    <link rel="icon" href="%BASE_URL%favicon.ico" />
    <script src="%BASE_URL%global.js"></script>
    <title>%VITE_BASE_TITLE%</title>
  </head>
  <body>
    <div class="safe-note">
      <strong class="safe-note-title">温馨提示：</strong>
      <p class="safe-note-content">
        为了确保您的顺畅体验，我们强烈建议您下载并安装最新版的谷歌浏览器。
        <a href="https://www.google.cn/intl/zh-CN/chrome/">
          下载
        </a>
      </p>
      <span class="safe-note-close">×</span>
    </div>

    <div id="app">
      <!-- 加载动画 -->
      <div class="b-loading fullscreen">
        <div class="boxs">
          <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="text" data-text="正在进入..."></div>
      </div>
    </div>

    <script type="text/javascript">
      function notification(bool) {
        var elem = document.querySelector('.safe-note');
        elem.classList[bool ? 'add' : 'remove']('show');
      }
      function addListener() {
        var elem = document.querySelector('.safe-note');
        var close = document.querySelector(
          '.safe-note-close'
        );
        close.addEventListener('click', function () {
          elem.classList.remove('show');
        });
      }
      function startSniffer() {
        var ua = navigator.userAgent;
        // console.log(ua);
        var isChrome = /Chrome/.test(ua);
        var isSafeChrome = isChrome;
        try {
          var versionName = ua.match(/Chrome\/([\d.]+)/)[1];
          var version = versionName
            .split('.')
            .map(Number)[0];
          isSafeChrome = isChrome && version >= 90;
        } catch (e) {}

        // 非谷歌内核或谷歌内核版本小于90
        if (!isSafeChrome) {
          addListener();
          setTimeout(() => {
            notification(true);
          }, 2e3);
        }
      }
      startSniffer();
    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
